<template>
  <div class="sell">
    <div class="swipe">
      <van-swipe :autoplay="3000">
        <van-swipe-item v-for="(image, index) in images" :key="index">
          <img v-lazy="image" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <section class="new">
      <h3>商城早报</h3>
      <van-notice-bar left-icon="volume-o" :scrollable="false">
        <van-swipe
          vertical
          class="notice-swipe"
          :autoplay="3000"
          :show-indicators="false"
        >
          <van-swipe-item>我去了米家发布会现场 米粉说Vol.13</van-swipe-item>
          <van-swipe-item
            >米兔儿童电话手表2发布，竟然能续航6天！</van-swipe-item
          >
          <van-swipe-item>重磅头条！本周大家都爱看的文章汇总</van-swipe-item>
        </van-swipe>
      </van-notice-bar>
    </section>
    <section class="img">
      <div class="topimg">
        <div class="left">
          <img src="../../assets/advert01.jpg" alt="" />
        </div>
        <div class="right">
          <div>
            <img src="../../assets/advert02.jpg" alt="" />
          </div>
          <div>
            <img src="../../assets/advert03.jpg" alt="" />
          </div>
        </div>
      </div>
      <div class="botimg">
        <img src="../../assets/advert04.jpg" alt="" />
      </div>
    </section>
    <section class="list">
      <div class="topli">
        <img src="../../assets/product.jpg" alt="" />
      </div>
      <div class="botli">
        <ul>
          <li v-for="(item, index) in list" :key="index" @click="Gogoods(item.number)">
            <div class="photo">
              <img :src="item.images" alt="" />
            </div>
            <div class="con">
              <p class="name">{{ item.name }}</p>
              <p class="price">￥{{ item.price }}</p>
            </div>
          </li>
        </ul>
      </div>
    </section>
  </div>
</template>
<script>
import { Dialog } from "vant";
import { getPhoneList } from "../../http/api";
export default {
  components: {
    [Dialog.Component.name]: Dialog.Component,
  },
  data() {
    return {
      images: [
        "https://img01.yzcdn.cn/vant/apple-1.jpg",
        "https://img01.yzcdn.cn/vant/apple-2.jpg",
      ],
      list: [
        {
          images: "http://demo.demohuo.top/modals/67/6714/demo/skin/pic1.jpg",
          price: 669,
          name: "红米4X",
        },
        {
          images: "http://demo.demohuo.top/modals/67/6714/demo/skin/pic2.jpg",
          price: 669,
          name: "红米4X",
        },
        {
          images: "http://demo.demohuo.top/modals/67/6714/demo/skin/pic3.jpg",
          price: 669,
          name: "红米4X",
        },
      ],
    };
  },
  methods: {
    Gogoods(val) {
      // this.$router.push({ name: "goods", params: { number: val }})
      this.$router.push({ path: '/goods', query: { number: val }})
    },
    //获取渲染数据
    init() {
      getPhoneList("/data/phone").then((data) => {
        if (data.code == 200) {
          // console.log(data);
          let list = JSON.stringify(data.rows);
          // console.log(list);
          localStorage.setItem("list", list);
        } else {
          Dialog.alert({
            message: data.msg,
          });
        }
      });
    },
    //渲染数据
    rendering() {
      let list = localStorage.getItem("list");
      if (list) {
        // console.log(JSON.parse(list));
        this.list = JSON.parse(list);
      }
    },
  },
  created() {
    this.init();
  },
  mounted() {
    this.rendering();
  },
};
</script>
<style lang="scss">
@import "@/static/css/base.scss";
@import "@/static/componentscss/sell.scss";
.notice-swipe {
  height: 40px;
  line-height: 40px;
}
</style>